<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap core CSS -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
        <!--jQuery & BootStrap-->
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#delete_button").click(function() {
                    var name = $("#input_name_text").val();
                    var pig_info = {
                        "name": name
                    };
                    $.post("delete_pig", pig_info, function (data, status) {
                        if (data) {
                            $("#success_alert").show();
                            $("#error_alert").hide();
                        } else {
                            $("#error_alert").show();
                            $("#success_alert").hide();
                        }
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="register_pig.html">Register Pig</a></li>
                <li><a href="quarantine_pig.html">Quarantine Pig</a></li>
                <li><a href="transfer_pig_to_slaughter_house.html">Transfer Pig To Slaughter House</a></li>
                <li><a href="query_pig_history.html">Query Pig History</a></li>
                <li><a href="query_owner_all_pigs.html">Query Owner All Pigs</a></li>
                <li><a href="delete_pig.html">Delete Pig</a></li>
            </ul>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <span class="input-group-addon" id="input_name_addon">Name</span>
                        <input type="text" class="form-control" id="input_name_text" placeholder="Piggy">
                    </div><!-- /input-group -->
                </div><!-- /.col-md-4 -->
                <div class="col-md-1">
                    <button id="delete_button" class="btn btn-primary" type="button" style="background-color: #d9534f;color: white">Delete</button>
                </div><!-- /.col-md-1 -->
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div id="success_alert" class="alert alert-success" hidden="hidden">
                        Succeeded to Delete Pig!
                    </div>
                </div><!-- /.col-md-4 -->
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div id="error_alert" class="alert alert-danger" hidden="hidden">
                        Failed to Delete Pig!
                    </div>
                </div><!-- /.col-md-4 -->
            </div>
        </div><!-- /container -->
    </body>
</html>